<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>浏览器事件</title>
	<style>
		.div1 {
			width: 300px;
			height: 300px;
			background: pink;
		}

		.div2 {
			width: 200px;
			height: 200px;
			background: red;
		}

		.div3 {
			width: 100px;
			height: 100px;
			background: blue;
		}
	</style>
</head>

<body>
	<div class="div1">
		div1
		<div class="div2">
			div2
			<div class="div3">div3</div>
		</div>
	</div>

	<script>
		function div1SayHello() {
			console.log('hello, i am div1');
		}
		function div2SayHello() {
			console.log('hello, i am div2');
		}
		function div3SayHello() {
			console.log('hello, i am div3');
		}

		// 第三个参数为true，则为捕获阶段执行, false则为冒泡阶段执行 默认false冒泡
		document.querySelector('.div1').addEventListener('click', div1SayHello, true)
		document.querySelector('.div2').addEventListener('click', div2SayHello, true)
		document.querySelector('.div3').addEventListener('click', div3SayHello, true)
	</script>
</body>

</html>